<!--
 * @Author: your name
 * @Date: 2020-12-10 17:17:50
 * @LastEditTime: 2020-12-18 10:36:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\phpStudy\WWW\proj_steam\src\html\detail\detail.html
-->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在 Steam 上购买</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/lib/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/lib/swiper-6.3.5/swiper-bundle.min.css">
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/nav.css">
    <link rel="stylesheet" href="/css/detail/detail.css">
</head>

<body>
    <!-- 导航栏 -->
    <header>
    </header>

    <!-- 内容 -->
    <section>
        <!-- 内容头部 -->
        <div class="page">
            <!-- 导航栏 -->
            <nav class="store-header"> </nav>

            <!-- 头部内容 -->
            <div class="page-content" id='pageContent'>
                <div class="content">
                    <div class="content-title">
                        <a href="/html/list/list.html">所有游戏</a>
                        >
                        <a href="#" id="game-type"><span>冒险</span>游戏</a>
                        >
                        <a href="#" id="game-title-name"></a>
                    </div>
                    <div class="page-headerBox">
                        <h2 class="page-header"></h2>
                        <a>社区中心</a>
                    </div>
                </div>
            </div>
            <!-- <script type='text/html' id='pageContentTemplate'>
                <div class="content">
                    <div class="content-title">
                        <a href="/html/list/list.html">所有游戏</a>
                        >
                        <a href="#">{{game.detail.type.type1}}游戏</a>
                        >
                        <a href="#">{{game.name}}</a>
                    </div>
                    <div class="page-headerBox">
                        <h2 class="page-header">{{game.name}}</h2>
                        <a>社区中心</a>
                    </div>
                </div>
            </script> -->
        </div>

        <!-- 游戏介绍 -->
        <div class="games-content">
            <div class="content">
                <!-- 轮播图 -->
                <div class="games-left-content" id="detailSwiper">
                    <!-- Swiper -->
                    <!-- <div class="swiper-container gallery-top">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_4ce07ae360b166f0f650e9a895a3b4b7bf15e34f.600x338.jpg)">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_668dafe477743f8b50b818d5bbfcec669e9ba93e.600x338.jpg)">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_66b553f4c209476d3e4ce25fa4714002cc914c4f.600x338.jpg)">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_bac60bacbf5da8945103648c08d27d5e202444ca.600x338.jpg)">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_d1a8f5a69155c3186c65d1da90491fcfd43663d9.600x338.jpg)">
                            </div>
                        </div>
                    </div>

                    <div class="swiper-container gallery-thumbs">

                        <div class="swiper-wrapper">
                            
                                <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_4ce07ae360b166f0f650e9a895a3b4b7bf15e34f.600x338.jpg)">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_668dafe477743f8b50b818d5bbfcec669e9ba93e.600x338.jpg)">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_66b553f4c209476d3e4ce25fa4714002cc914c4f.600x338.jpg)">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_bac60bacbf5da8945103648c08d27d5e202444ca.600x338.jpg)">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url(/images/detail/item/ss_d1a8f5a69155c3186c65d1da90491fcfd43663d9.600x338.jpg)">
                            </div>
                            
                        </div>

                    </div> -->
                </div>

                <script type="text/html" id="detailSwiperTemplate">
                    <!-- Swiper -->
                    <div class="swiper-container gallery-top">
                        
                        <div class="swiper-wrapper">
                            {{each gameShow as gameShow key}}
                            <div class="swiper-slide my-foto"
                                style="background-image:url({{gameShow}})">
                            </div>
                            {{/each}}
                        </div>
                        
                    </div>

                    <div class="swiper-container gallery-thumbs">

                        <div class="swiper-wrapper">
                            {{each gameShow as gameShow key}}
                            <div class="swiper-slide"
                                style="background-image:url({{gameShow}})">
                            </div>
                            {{/each}}
                              
                        </div>
                </script>
                <!-- 游戏详细信息 -->
                <div class="games-right-content" id='gameDesc'>

                    <!-- <div class="games-img">
                        <img src="" alt="">
                    </div>

                    <div class="games-des">
                        Red Dead Redemption 2 已荣获超过 175 项年度游戏奖项且获得超过 250 个满分评价，游戏中述说亚瑟·摩根和声名狼藉的范德林德帮派的传奇故事，体验在 19
                        世纪的最后岁月里横跨美国的亡命之旅。除此之外，还可免费享受 Red Dead 在线模式中与众多玩家共享的逼真世界。
                    </div>

                    <div class="games-review">
                        <div class="review-row">
                            <div class="subtitle">
                                最近评测:
                            </div>
                            <div class="summary">
                                <span class="user-review poistive">好评如潮</span>
                                <span>(22,319)</span>
                            </div>
                        </div>
                        <div class="review-row">
                            <div class="subtitle">
                                最近评测:
                            </div>
                            <div class="summary">
                                <span class="user-review poistive">全部如潮</span>
                                <span>(128,943)</span>
                            </div>
                        </div>

                        <div class="issue-date">
                            <div class="subtitle">
                                发行日期:
                            </div>
                            <div class="date">
                                2019年12月6日
                            </div>
                        </div>

                        <div class="review-row">
                            <div class="subtitle">
                                开发商:
                            </div>
                            <div class="summary">
                                <a href="#">Rockstar Games</a>
                            </div>
                        </div>
                        <div class="review-row">
                            <div class="subtitle">
                                发行商:
                            </div>
                            <div class="summary">
                                <a href="#">Rockstar Games</a>
                            </div>
                        </div>
                    </div>

                    <div class="games-type">
                        <div class="games-type-title">
                            该产品的热门用户自定义标签：
                        </div>
                        <div class="games-type-tags">
                            <a href="#">冒险</a>
                            <a href="#">开放世界</a>
                            <a href="#">动作</a>
                            <a href="#">西部</a>
                            <a href="#">剧情丰富</a>
                            <a href="#">+</a>
                        </div>
                    </div> -->
                </div>
                <script type='text/html' id='gameDescTemplate'>     
                    <div class="games-img">
                        <img src="{{game.detail.images.imgMain}}" alt="">
                    </div>

                    <div class="games-des">
                        {{game.detail.gameDesc}}
                    </div>

                    <div class="games-review">
                        
                        <div class="review-row">
                            <div class="subtitle">
                                最近评测:
                            </div>
                            <div class="summary">
                                <span class="user-review poistive">{{game.list.reviewCN}}</span>
                                <span>({{game.detail.reviewRecent}})</span>
                            </div>
                        </div>
                        <div class="review-row">
                            <div class="subtitle">
                                最近评测:
                            </div>
                            <div class="summary">
                                <span class="user-review poistive">{{game.list.reviewCN}}</span>
                                <span>({{game.list.reviewCount}})</span>
                            </div>
                        </div>

                        <div class="issue-date">
                            <div class="subtitle">
                                发行日期:
                            </div>
                            <div class="date">
                                {{game.list.issueDate}}
                            </div>
                        </div>

                        <div class="review-row">
                            <div class="subtitle">
                                开发商:
                            </div>
                            <div class="summary">
                                <a href="#">{{game.detail.company.developer}}</a>
                            </div>
                        </div>
                        <div class="review-row">
                            <div class="subtitle">
                                发行商:
                            </div>
                            <div class="summary">
                                <a href="#">{{game.detail.company.publisher}}</a>
                            </div>
                        </div>
                    </div>

                    <div class="games-type">
                        <div class="games-type-title">
                            该产品的热门用户自定义标签：
                        </div>
                        <div class="games-type-tags">
                            {{each game.detail.type as type key}}

                            <a href="#">{{type}}</a>
                            
                            {{/each}}
                            <a href="#">+</a>
                        </div>
                    </div>
                </script>
            </div>
        </div>

        <!-- 添加愿望单按钮 以及 没登录时候的提示 -->
        <div class="tips-functionBtn">
            <div class="content">
                <div class="tips">
                    <p>
                        想要将这件物品添加至您的愿望单、关注它或标记为不感兴趣，请先<a href="/html/login/login.html">登录</a>
                    </p>
                </div>
                <div class="functionBtns">
                    
                    <div class="add-wishlist">
                        <div class="functionBtn">
                            <a href="#">添加至您的愿望单</a>
                        </div>
                        <div class="functionBtn">
                            <a href="#">关注</a>
                        </div>
                        <div class="functionBtn">
                            <a href="#">忽略</a>
                        </div>
                        <div class="functionBtn downBtn">
                            <a href="#">
                                <img src="/images/public/icon/btn_arrow_down_padded.png" alt="">
                            </a>
                        </div>
                    </div>
                    <a href="#">
                        查看您的队列 <i></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 游戏详细内容 -->
        <div class="games-detail">
            <div class="content">

                <!-- 左边：价格 以及 详细介绍 -->
                <div class="left-content">
                    <!-- 价格 -->
                    <div class="game-priceBox">

                        <!-- <div class="game-price">
                            <div class="game-price-title">
                                <h1>
                                    购买 Red Dead Redemption 2
                                </h1>
                                <span class="platform-img win"></span>
                            </div>

                            <div class="add-cartBox">
                                <div class="price">
                                    <span class="final-price">
                                        &yen; <span>249</span>
                                    </span>
                                </div>
                                <div class="add-cart">
                                    添加至购物车
                                </div>

                                <div class="count-btnBox">
                                    <button class="count-btn reduce">-</button>
                                    <input type="text" value="1">
                                    <button class="count-btn add">+</button>
                                </div>
                            </div>

                        </div> -->

                        <div class="game-price discount" id='priceDiscount'>
                            <div class="game-price-title">
                                <h1>
                                    购买 Red Dead Redemption 2
                                </h1>
                                <span class="platform-img win"></span>
                            </div>
                            <!-- <div class="discount-countdown">
                                <p>特价促销！剩余时间
                                    <span>13:02:54</span>
                                </p>
                            </div> -->

                            
                            <div class="add-cartBox">
                                <div class="discount-pct">
                                    -40%
                                </div>
                                <div class="price">
                                    <span class="origin-price">
                                        &yen;<span>239</span>
                                    </span>
                                    <span class="final-price">
                                        &yen; <span>166</span>
                                    </span>
                                </div>
                                <div class="add-cart" id='addCartBtn'>
                                    添加至购物车
                                </div>
                                
                                <div class="count-btnBox">
                                    <button class="count-btn reduce" id="reduceBtn">-</button>
                                    <input type="text" value="1" id="countInput">
                                    <button class="count-btn add" id="addBtn">+</button>
                                </div>
                            </div>
                        </div>
                        <!-- <script type="text/html" id='priceDiscountTemplate'>
                            <div class="game-price-title">
                                <h1>
                                    购买 {{game.name}}
                                </h1>
                                <span class="platform-img win"></span>
                            </div>
                            <div class="discount-countdown">
                                <p>特价促销！剩余时间
                                    <span>13:02:54</span>
                                </p>
                            </div>
             
                            <div class="add-cartBox">
                                <div class="discount-pct">
                                    -{{game.discountPct}}%
                                </div>
                                <div class="price">
                                    <span class="origin-price">
                                        &yen;<span>{{game.originPrice}}</span>
                                    </span>
                                    <span class="final-price">
                                        &yen; <span>{{game.finalPrice}}</span>
                                    </span>
                                </div>
                                <div class="add-cart" id='addCartBtn'>
                                    添加至购物车
                                </div>
                                
                                <div class="count-btnBox">
                                    <button class="count-btn reduce" id="reduceBtn">-</button>
                                    <input type="text" value="1" id="countInput">
                                    <button class="count-btn add" id="addBtn">+</button>
                                </div>
                            </div>
                        </script> -->
                    </div>

                    <!-- 近期活动 和 公告 -->
                    <div class="event-noticeBox">
                        <div class="left-content-title">
                            <h2>近期活动与公告</h2>
                            <a href="#">查看全部</a>
                        </div>

                        <div class="event-notice" id="eventNotice">
                            <!-- <a href="#" class="event">
                                <div class="event-background"
                                    style="background-image: url(/images/detail/item/a7622827beccfaf3c28567a428e4022cca1ee06c_400x225.jpg);">
                                </div>

                                <div class="event-content">
                                    <img src="/images/detail/item/a7622827beccfaf3c28567a428e4022cca1ee06c_400x225.jpg"
                                        alt="">
                                    <div class="event-content-text">
                                        <p>The Prestigious Bounty Hunter License Is Available Now</p>
                                        <span>2020年12月1日周二 23:39 CST
                                        </span>
                                    </div>
                                </div>
                                <div class="event-content-hover">
                                    <div class="hover-title">
                                        新闻
                                    </div>
                                    <div class="hover-content">
                                        The West is a lawless place - a wide expanse filled with all manners of predator
                                        and their prey. Overwhelmed by the emergence of a new order of bandits and
                                        reprobates, the law is...
                                    </div>
                                </div>
                            </a>

                            <a href="#" class="event">
                                <div class="event-background"
                                    style="background-image: url(/images/detail/item/4065362cb5acb27185778cf6cb37bded51dbd2cd_400x225.jpg);">
                                </div>
                                <div class="event-content">
                                    <img src="/images/detail/item/4065362cb5acb27185778cf6cb37bded51dbd2cd_400x225.jpg"
                                        alt="">
                                    <div class="event-content-text">
                                        <p>RED DEAD 在线模式：博物学家现已推出</p>
                                        <span class="text-title">
                                            追踪传说动物、使用全新武器及更多内容
                                        </span>
                                        <br>
                                        <span>2020年7月29日周三
                                            <span>08:15</span>
                                            <span>CST</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="event-content-hover">
                                    <div class="hover-title">
                                        重大更新
                                    </div>
                                    <div class="hover-content">
                                        追踪、抓捕并研究神奇的动物王国，加入 Red Dead 在线模式的最新边境职业：博物学家。
                                    </div>
                                </div>
                            </a> -->
                        </div>
                        <script type="text/html" id="eventNoticeTemplate">
                            <a href="#" class="event">
                                <div class="event-background"
                                    style="background-image: url({{gameEvent.left.background}});">
                                </div>

                                <div class="event-content">
                                    <img src="{{gameEvent.left.background}}"
                                        alt="">
                                    <div class="event-content-text">
                                        <p>{{gameEvent.left.title}}</p>
                                        <span>{{gameEvent.left.date}}
                                        </span>
                                    </div>
                                </div>
                                <div class="event-content-hover">
                                    <div class="hover-title">
                                        {{gameEvent.left.hoverTitle}}
                                    </div>
                                    <div class="hover-content">
                                        {{gameEvent.left.hoverContent}}
                                    </div>
                                </div>
                            </a>

                            <a href="#" class="event">
                                <div class="event-background"
                                    style="background-image: url({{gameEvent.right.background}});">
                                </div>
                                <div class="event-content">
                                    <img src="{{gameEvent.right.background}}"
                                        alt="">
                                    <div class="event-content-text">
                                        <p>{{gameEvent.right.title}}</p>
                                        <span>{{gameEvent.right.date}}
                                        </span>
                                    </div>
                                </div>
                                <div class="event-content-hover">
                                    <div class="hover-title">
                                        {{gameEvent.right.hoverTitle}}
                                    </div>
                                    <div class="hover-content">
                                        {{gameEvent.right.hoverContent}}
                                    </div>
                                </div>
                            </a>
                        </script>
                    </div>

                    <!-- 其他版本 -->
                    <!-- <div class="other-version">
                        <div class="left-content-title">
                            <h2>ULTIMATE EDITION</h2>
                        </div>
                        <div class="version-content">
                            <img src="/images/detail/item/Ultimate_615.jpg" alt="">
                            <p>Red Dead Redemption
                                2：终极版将提供特别版中的全部故事模式内容及额外的在线模式奖励，包括在线模式角色的奖励装束、等级奖励、黑栗色纯血马以及您还可免费使用生存者营地主题。</p>
                            <br>
                            <p>另外，您可于在线模式中免费获取额外的武器。</p>
                        </div>
                        <div class="slideBtnBox">
                            <span>展开阅读</span>
                        </div>
                    </div> -->

                    <!-- 关于这款游戏 -->
                    <div class="about-game">
                        <div class="left-content-title">
                            <h2>关于这款游戏</h2>
                        </div>

                        <div class="about-game-content" id="aboutContent">
                            <!-- <p>美国，1899 年。</p>
                            <br>
                            <p>亚瑟·摩根和范德林德帮众是一群逃亡在外的亡命之徒。联邦侦探和全国顶尖的赏金猎人在他们的身后穷追不舍，亚瑟一行人必须在广袤蛮荒的美国腹地上四处劫掠、挣扎求生。而帮派内部的矛盾分化日渐加深，摆在亚瑟面前的将是他无法避免的抉择：究竟是选择自己的理想，还是选择效忠于抚养了自己的帮派。
                            </p>
                            <br>
                            <p>现已添加额外故事模式内容和功能齐全的照片模式。除此之外，Red Dead Redemption 2 玩家还可免费享受 Red Dead
                                在线模式中与众多玩家共享的逼真世界。此模式中，玩家可从事各种不同的职业，在边疆开拓属于自己的独特生涯。您可以成为追捕通缉犯的赏金猎人、经营自己生意的商贩、发掘珍奇宝藏的收藏家或运营地下酿酒厂的私酒贩等等。
                            </p>
                            <br>
                            <p>Red Dead Redemption 2 PC
                                版借助全新图形和技术改进以增强沉浸感，并充分利用了电脑强大的性能，使这个庞大、丰富而细致的世界的每个角落都栩栩如生。包括更广的渲染距离；为改良的昼夜照明而提供的更高质量的全局照明和环境光遮蔽；改良的反射和所有距离提供更深、更高分辨率的阴影；细分曲面处理树木纹理并改善草地和毛皮纹理，使所有植物和动物都更加逼真。
                            </p>
                            <br>
                            <p>Red Dead Redemption 2 PC 版还提供 HDR 支持，可在高端显示设置上以 4K 及更高分辨率运行、多显示器配置、宽屏配置、更快的帧速率及更多。</p> -->
                        </div>
                        <script type="text/html" id="aboutContentTemplate">
                            {{each gameAbout as gameAbout key}}
                            <br>
                            <p>{{gameAbout}}</p>
                            {{/each}}
                        </script>

                    </div>

                    <!-- 成人内容描述 -->
                    <div class="adult">
                        <div class="left-content-title">
                            <h2>成人内容描述</h2>
                        </div>
                        <p>开发者对内容描述如下：</p>
                        <i>此游戏包含的内容可能不适合所有年龄段，或不宜在工作期间访问：常见成人内容</i>
                    </div>

                    <!-- 系统需求 -->
                    <div class="system-require">
                        <div class="left-content-title">
                            <h2>系统需求</h2>
                        </div>
                        <div class="system-require-content">
                            <div class="system-require-detail">
                                <strong>最低配置：</strong>
                                <br>
                                <ul>
                                    <li>需要 64 位处理器和操作系统</li>
                                    <li><b>操作系统:</b> Windows 7 - Service Pack 1 (6.1.7601)</li>
                                    <li><b>处理器:</b> Intel® Core™ i5-2500K / AMD FX-6300</li>
                                    <li><b>内存:</b> 8 GB RAM</li>
                                    <li><b>显卡:</b> Nvidia GeForce GTX 770 2GB / AMD Radeon R9 280 3GB</li>
                                    <li><b>网络:</b> 宽带互联网连接</li>
                                    <li><b>存储空间:</b> 需要 150 GB 可用空间</li>
                                    <li><b>声卡:</b> Direct X Compatible</li>
                                </ul>
                            </div>
                            <div class="system-require-detail">
                                <strong>推荐配置：</strong>
                                <br>
                                <ul>
                                    <li>需要 64 位处理器和操作系统</li>
                                    <li><b>操作系统:</b> Windows 10 - April 2018 Update (v1803)</li>
                                    <li><b>处理器:</b> Intel® Core™ i7-4770K / AMD Ryzen 5 1500X</li>
                                    <li><b>内存:</b> 12 GB RAM</li>
                                    <li><b>显卡:</b> Nvidia GeForce GTX 1060 6GB / AMD Radeon RX 480 4GB </li>
                                    <li><b>网络:</b> 宽带互联网连接</li>
                                    <li><b>存储空间:</b> 需要 150 GB 可用空间</li>
                                    <li><b>声卡:</b> Direct X Compatible</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 软件授权 -->
                        <div class="config">
                            <p>软件授权条款请参阅游戏内说明及 rockstargames.com/zh/eula；在线游戏账户使用条款请参阅
                                zh-cn.socialclub.rockstargames.com/。使用不得转让的特殊功能，例如独家提供、可解锁、可下载、多人游戏、在线与额外内容、服务、功能时，可能需要单次使用的序号、额外负担费用和/或不可转让的在线注册账号（需年满十三岁）。使用特别游戏功能可能需要配备因特网联机，并非所有用户或在任何时间内皆能使用，并且可能不经通知而终止、修改或以不同条款提供。违反
                                EULA、 行为准则或是其他政策，可能导致使用本游戏或在线账号的权利遭到限制或终止。如需信息、客户及技术支持，请前往
                                support.rockstargames.com/zh。本游戏纯属虚构。游戏中可能出现与现实生活中相似的人物、地点、公司、团体、活动、建筑等内容；它们与本游戏无任何关系，且相关内容亦非事实。本游戏的制造商、发行商和授权人并未批准、容忍或鼓励任何内容。严禁未经授权进行拷贝、修改、逆向工程、反编译、传播、公共展示、租借、盈利性游玩或制售盗版和违反
                                EULA 等行为。某些限制适用于购买，使用和兑换。 更多详情，敬请查看
                                EULA（www.rockstargames.com/zh/eula）和服务条款（www.rockstargames.com/zh/legal）。</p>

                            <p>Rockstar Games, Inc. ©2005-19. Rockstar Games、Red Dead Redemption、R*、Redemption、Red Dead
                                和 Dead Eye 是 Take-Two Interactive 的标志/徽标/版权。杜比和双 D
                                符号为杜比实验室的商标。所有其他标志和商标均为其各自所有者的产权。保留所有权利。</p>
                        </div>
                    </div>

                    <!-- TODO: 更多类似内容 -->
                </div>

                <!-- 右边：额外信息 -->
                <div class="right-content">
                    <!-- 对这游戏是否感兴趣 -->
                    <div class="interesting">
                        <div class=" dataBox interesting-title">
                            您对这款游戏感兴趣吗？
                        </div>
                        <!-- 没登录的时候显示 -->
                        <div class=" dataBox interesting-content public">
                            <p>基于您的游戏、好友以及您关注的鉴赏家，登录以查看您是否有可能喜欢这个内容的原因。</p>
                            <br>
                            <a href="/html/login/login.html">登录</a>
                            <span>或</span>
                            <a href="#">在 Steam 中打开</a>
                        </div>
                        <!-- 登录的时候显示 -->
                        <div class=" dataBox interesting-content person">
                            <p>像您一样的玩家喜欢此游戏。</p>
                            <hr>
                            <p>用户评测： <span>特别好评</span></p>
                            <hr>
                            <p>是热销商品</p>
                        </div>
                    </div>

                    <!-- 游玩类型 -->
                    <div class="dataBox play-type">
                        <div class="type-detail">
                            <div class="type-detail-icon">
                                <a href="#">
                                    <img src="/images/detail/icon/ico_singlePlayer.png" alt="">
                                </a>
                            </div>
                            <a href="#" class="type-detail-name">
                                单人
                            </a>
                        </div>
                        <div class="type-detail">
                            <div class="type-detail-icon">
                                <a href="#">
                                    <img src="/images/detail/icon/ico_multiPlayer.png" alt="">
                                </a>
                            </div>
                            <a href="#" class="type-detail-name">
                                线上玩家对战
                            </a>
                        </div>
                        <div class="type-detail">
                            <div class="type-detail-icon">
                                <a href="#">
                                    <img src="/images/detail/icon/ico_coop.png" alt="">
                                </a>
                            </div>
                            <a href="#" class="type-detail-name">
                                在线合作
                            </a>
                        </div>
                        <div class="type-detail">
                            <div class="type-detail-icon">
                                <a href="#">
                                    <img src="/images/detail/icon/ico_achievements.png" alt="">
                                </a>
                            </div>
                            <a href="#" class="type-detail-name">
                                Steam 成就
                            </a>
                        </div>
                        <div class="type-detail">
                            <div class="type-detail-icon">
                                <a href="#">
                                    <img src="/images/detail/icon/ico_cart.png" alt="">
                                </a>
                            </div>
                            <a href="#" class="type-detail-name">
                                应用内购买
                            </a>
                        </div>
                        <div class="type-detail">
                            <div class="type-detail-icon">
                                <a href="#">
                                    <img src="/images/detail/icon/ico_partial_controller.png" alt="">
                                </a>
                            </div>
                            <a href="#" class="type-detail-name">
                                部分支持控制器
                            </a>
                        </div>
                        <div class="type-detail">
                            <div class="type-detail-icon">
                                <a href="#">
                                    <img src="/images/detail/icon/ico_remote_play.png" alt="">
                                </a>
                            </div>
                            <a href="#" class="type-detail-name">
                                在手机上远程操作
                            </a>
                        </div>
                        <div class="type-detail">
                            <div class="type-detail-icon">
                                <a href="#">
                                    <img src="/images/detail/icon/ico_remote_play.png" alt="">
                                </a>
                            </div>
                            <a href="#" class="type-detail-name">
                                在平板上远程操作
                            </a>
                        </div>
                        <div class="notice">
                            需要第三方帐户: Rockstar Games Social Club
                        </div>
                        <div class="notice">
                            <p>需要同意一份来自第三方的最终用户许可协议</p>
                            <a href="#">Red Dead Redemption 2 EULA</a>
                        </div>
                    </div>

                    <!-- 游戏分级 -->
                    <div class="dataBox game-rating">
                        <div class="game-rating-detail">
                            <a href="#">
                                <img src="/images/detail/icon/18.png" alt="">
                            </a>
                            <p>STRONG LANGUAGE
                                <br>
                                VIOLENCE
                                <br>
                                GAMBLING
                            </p>
                        </div>
                        <div class="game-rating-agency">
                            分级机构：泛欧洲游戏信息组织（PEGI）
                        </div>
                    </div>

                    <!-- 游戏成就 -->
                    <div class="dataBox game-achivement" id="achievement">
                        <!-- <div class="game-achivement-title">
                            包括 51 项 Steam 成就
                        </div>
                        <div class="game-achivement-detail">
                            <div class="achivement">
                                <img src="/images/detail/icon/cede247d21de983c4d0d8aed8b75d1324cac9bf3.jpg" alt="">
                            </div>
                            <div class="achivement">
                                <img src="/images/detail/icon/1d64c48392a4a9b38a8118fd325498530e377c85.jpg" alt="">
                            </div>
                            <div class="achivement">
                                <img src="/images/detail/icon/c97461b35c26b932a49485ff5ae47191fd181409.jpg" alt="">
                            </div>
                            <a class="achivement">
                                查看
                                <br>
                                所有 51 项
                            </a>
                        </div> -->
                    </div>
                    <script type='text/html'id='achievementTemplate'>
                        <div class="game-achivement-title">
                            包括 {{gameAchieve.count}} 项 Steam 成就
                        </div>
                        <div class="game-achivement-detail">
                            <div class="achivement">
                                <img src="{{gameAchieve.image.imgAchieve1}}" alt="">
                            </div>
                            <div class="achivement">
                                <img src="{{gameAchieve.image.imgAchieve2}}" alt="">
                            </div>
                            <div class="achivement">
                                <img src="{{gameAchieve.image.imgAchieve3}}" alt="">
                            </div>
                            <a class="achivement">
                                查看
                                <br>
                                所有 {{gameAchieve.count}} 项
                            </a>
                        </div>
                    </script>

                    <!-- 游戏信息 -->
                    <div class="dataBox game-message">
                        <ul class="game-message-detail" id="gameMessage">
                            <!-- <li>
                                <b>名称:</b> Red Dead Redemption 2
                            </li>
                            <li>
                                <b>类型:</b>
                                <a href="#">动作</a>, <a href="#">冒险</a>
                            </li>
                            <li>
                                <b>开发商:</b> <a href="#">Rockstar Games</a>
                            </li>
                            <li>
                                <b>发行商:</b> <a href="#">Rockstar Games</a>
                            </li>
                            <li>
                                <b>系列:</b> <a href="#">Red Dead Redemption</a>
                            </li>
                            <li>
                                <b>发行日期:</b> 2019年12月6日
                            </li> -->
                        </ul>
                        <script type="text/html" id="gameMessageTemplate">
                            <li>
                                <b>名称:</b> {{game.name}}
                            </li>
                            <li>
                                <b>类型:</b>
                                <a href="#">{{game.detail.type.type1}}</a>, <a href="#">{{game.detail.type.type2}}</a>
                            </li>
                            <li>
                                <b>开发商:</b> <a href="#">{{game.detail.company.developer}}</a>
                            </li>
                            <li>
                                <b>发行商:</b> <a href="#">{{game.detail.company.publisher}}</a>
                            </li>
                            <li>
                                <b>发行日期:</b> {{game.list.issueDate}}
                            </li>
                        </script>

                        <div class="game-message-detail">
                            <br>
                            <a href="#" class="linkbar">访问网站<img src="/images/detail/icon/ico_external_link.gif"
                                    alt=""></a>
                            <a href="#" class="linkbar">查看手册<img src="/images/detail/icon/ico_external_link.gif"
                                    alt=""></a>
                            <a href="#" class="linkbar">查看统计</a>
                            <a href="#" class="linkbar">查看更新记录</a>
                            <a href="#" class="linkbar">阅读相关新闻</a>
                            <a href="#" class="linkbar">查看讨论</a>
                            <a href="#" class="linkbar">查看社区组</a>
                        </div>
                    </div>

                    <!-- 分享按钮 -->
                    <!-- TODO: hover 举报该产品 -->
                    <div class="dataBox sharebtn">
                        <a href="#">分享</a>
                        <a href="#">嵌入</a>
                        <a href="#"><b></b></a>
                    </div>

                    <!-- 游戏评测 -->
                    <div class="dataBox game-review">
                        <div class="score" id="score">
                            
                        </div>
                        <!-- <script type="text/html" id="scoreTemplate">
                            {{game.score}}
                        </script> -->
                        <img src="/images/detail/icon/mc_logo_no_text.png" alt="">
                        <div class="wordmark">
                            <div class="metacritic">metacritic</div>
                            <div class="read-review">
                                <a>阅读游戏评测</a>
                                <img src="/images/detail/icon/ico_external_link.gif" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- 底部栏 -->
    <footer>

    </footer>
</body>

<script src="/lib/requirejs/require.js" data-main='/js/detail/detail'></script>

</html>